<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" >

<title>FineUI 前端扩展-有偿 | 没想好的个人博客</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> -->
   <!-- Font Awesome CSS-->
   <link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css" rel="stylesheet">

   <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<link rel="shortcut icon" href="https://shixixiyue.gitee.io//favicon.ico?v=1709791195950">
<link rel="stylesheet" href="https://shixixiyue.gitee.io//styles/main.css">



<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://jsd.onmicrosoft.cn/npm/vue/dist/vue.js"></script>


<style>
  .hljs-ln{
    padding-bottom: 1.2rem;
    margin: 0rem !important;
  }
  .hljs-ln td {
    border: none !important;
    padding: 2px 6px !important;
    line-height: 1.2rem;
    font-size: 1rem;
  }
  .hljs-ln tr td:first-child  {
    color: cadetblue;
    border-right: 1px solid !important;
  }
  .hljs-ln tr {
    border: none !important;
  }
</style>

    <meta name="description" content="
FineUI 前端扩展，纯js扩展，开箱即用，兼容 FineUIPro FineUIMVC FineUICore





项目介绍

测试环境
全部功能和演示

页签切换 和 树展开 【企业版功能】
弹出窗体 和 提示动画 【企业版功能..." />
    <meta name="keywords" content="FineUICore" />
  </head>
  <body>
    <div id="app" class="main">

      <div class="sidebar" :class="{ 'full-height': menuVisible }">
  <div class="top-container" data-aos="fade-right">
    <div class="top-header-container">
      <a class="site-title-container" href="https://shixixiyue.gitee.io/">
        <img src="https://shixixiyue.gitee.io//images/avatar.png?v=1709791195950" class="site-logo">
        <h1 class="site-title">没想好的个人博客</h1>
      </a>
      <div class="menu-btn" @click="menuVisible = !menuVisible">
        <div class="line"></div>
      </div>
    </div>
    <div>
      
        
          <a href="https://shixixiyue.gitee.io/" class="site-nav">
            首页
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/4gOKry8Qv/" class="site-nav">
            .Net Core
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/njETBpqXu/" class="site-nav">
            FineUICore
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/XyXyeLOBB" class="site-nav">
            读书笔记
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/TyVX6hfCJ" class="site-nav">
            Vue笔记
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/3Hz2sPtzO/" class="site-nav">
            产品
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/Db1wShB_E" class="site-nav">
            其他
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io/" class="site-nav">
            一一一一一一一一一
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//archives" class="site-nav">
            文章归档
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tags" class="site-nav">
            全部标签
          </a>
        
      
    </div>
  </div>
  <div class="bottom-container" data-aos="flip-up" data-aos-offset="0">
    <div class="social-container">
      
        
      
        
      
        
      
        
      
        
      
    </div>
    <div class="site-description">
      没事啥都说
    </div>
    <div class="site-footer">
      QQ：<a href="tencent://message/?uin=935732994&Site=''&Menu=yes">935732994<a/> <a href="http://beian.miit.gov.cn">京ICP备2024045283号<a/> | <a class="rss" href="https://shixixiyue.gitee.io//atom.xml" target="_blank">RSS</a>
    </div>
  </div>
</div>


      <div class="main-container">
        <div class="content-container" data-aos="fade-up">
          <div class="post-detail">
            <h2 class="post-title">FineUI 前端扩展-有偿</h2>
            <div class="post-date">2023-03-01
            
                
                  <a href="https://shixixiyue.gitee.io/tag/njETBpqXu/" class="tag">
                    FineUICore
                  </a>
                
            </div>
            
              <div class="feature-container" style="background-image: url('https://shixixiyue.gitee.io//post-images/fineui-qian-duan-kuo-zhan-you-chang.png')">
              </div>
            
            <div class="post-content" v-pre>
              <blockquote>
<p>FineUI 前端扩展，纯js扩展，开箱即用，兼容 FineUIPro FineUIMVC FineUICore</p>
</blockquote>
<!-- more -->
<p><ul class="markdownIt-TOC">
<li>
<ul>
<li><a href="#%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D">项目介绍</a>
<ul>
<li><a href="#%E6%B5%8B%E8%AF%95%E7%8E%AF%E5%A2%83">测试环境</a></li>
<li><a href="#%E5%85%A8%E9%83%A8%E5%8A%9F%E8%83%BD%E5%92%8C%E6%BC%94%E7%A4%BA">全部功能和演示</a>
<ul>
<li><a href="#%E9%A1%B5%E7%AD%BE%E5%88%87%E6%8D%A2-%E5%92%8C-%E6%A0%91%E5%B1%95%E5%BC%80-%E4%BC%81%E4%B8%9A%E7%89%88%E5%8A%9F%E8%83%BD">页签切换 和 树展开 <code>【企业版功能】</code></a></li>
<li><a href="#%E5%BC%B9%E5%87%BA%E7%AA%97%E4%BD%93-%E5%92%8C-%E6%8F%90%E7%A4%BA%E5%8A%A8%E7%94%BB-%E4%BC%81%E4%B8%9A%E7%89%88%E5%8A%9F%E8%83%BD">弹出窗体 和 提示动画 <code>【企业版功能】</code></a></li>
<li><a href="#%E4%B8%8B%E6%8B%89%E5%A4%9A%E9%80%89%E6%A1%86-%E5%92%8C-%E5%85%A8%E9%80%89-%E4%BC%81%E4%B8%9A%E7%89%88%E5%8A%9F%E8%83%BD">下拉多选框 和 全选 <code>【企业版功能】</code></a></li>
<li><a href="#%E6%8C%89%E9%92%AE%E6%A0%B7%E5%BC%8F">按钮样式</a></li>
<li><a href="#%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81%E4%BD%8D%E7%BD%AE">表单验证位置</a></li>
<li><a href="#grid%E5%88%97%E8%A1%A8%E9%BC%A0%E6%A0%87%E9%98%94%E9%80%89">Grid列表鼠标阔选</a></li>
<li><a href="#textbox%E6%A0%87%E7%AD%BE%E6%A8%A1%E5%BC%8F">TextBox标签模式</a></li>
<li><a href="#checkboxlist-radiobuttonlist-%E5%88%86%E7%BB%84%E6%A8%A1%E5%BC%8F">CheckBoxList RadioButtonList 分组模式</a></li>
<li><a href="#%E9%A1%B9%E7%9B%AE">项目</a></li>
</ul>
</li>
<li><a href="#%E8%8E%B7%E5%8F%96">获取</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</p>
<h2 id="项目介绍">项目介绍</h2>
<p>FineUI 前端扩展，纯js扩展，开箱即用，兼容 FineUIPro FineUIMVC FineUICore</p>
<p>包括js和css，不涉及后台的扩展，自己引用一下就能用；</p>
<h3 id="测试环境">测试环境</h3>
<p>FineUIPro 8.1</p>
<figure data-type="image" tabindex="1"><img src="https://shixixiyue.gitee.io//post-images/1684484065332.png" alt="代码" loading="lazy"></figure>
<h3 id="全部功能和演示"><a href="https://shixixiyue.gitee.io/blog/page/2023030101.html">全部功能和演示</a></h3>
<h4 id="页签切换-和-树展开-企业版功能">页签切换 和 树展开 <code>【企业版功能】</code></h4>
<p>默认开启，没有外露开关</p>
<figure data-type="image" tabindex="2"><img src="https://shixixiyue.gitee.io//post-images/1684484082851.gif" alt="页签切换 和 树展开" loading="lazy"></figure>
<h4 id="弹出窗体-和-提示动画-企业版功能">弹出窗体 和 提示动画 <code>【企业版功能】</code></h4>
<p>默认开启，没有外露开关</p>
<figure data-type="image" tabindex="3"><img src="https://shixixiyue.gitee.io//post-images/1684484093233.gif" alt="弹出窗体 和 提示动画" loading="lazy"></figure>
<h4 id="下拉多选框-和-全选-企业版功能">下拉多选框 和 全选 <code>【企业版功能】</code></h4>
<p>当下拉启动多选时默认开启，没有外露开关</p>
<figure data-type="image" tabindex="4"><img src="https://shixixiyue.gitee.io//post-images/1684484104928.gif" alt="下拉多选框 和 全选【企业版功能】" loading="lazy"></figure>
<h4 id="按钮样式">按钮样式</h4>
<pre><code>//Pro
&lt;F:Button ... CssClass=&quot;f-btn-Default&quot;&gt;
&lt;F:Button ... CssClass=&quot;f-btn-Primary&quot;&gt;
&lt;F:Button ... CssClass=&quot;f-btn-Success&quot;&gt;
&lt;F:Button ... CssClass=&quot;f-btn-Info&quot;&gt;
&lt;F:Button ... CssClass=&quot;f-btn-Warning&quot;&gt;
</code></pre>
<pre><code>//MVC/Core
F.Button().CssClass(&quot;f-btn-Default&quot;)
略
</code></pre>
<figure data-type="image" tabindex="5"><img src="https://shixixiyue.gitee.io//post-images/1684484117287.png" alt="按钮样式" loading="lazy"></figure>
<h4 id="表单验证位置">表单验证位置</h4>
<p>默认开启</p>
<pre><code>//Pro
F.ready(function () {
    F(formClientID).errorRow = false;//true开启 false关闭
});
</code></pre>
<pre><code>//MVC/Core
F.ready(function () {
    F.ui.Form1.errorRow = false;//true开启 false关闭
});
</code></pre>
<figure data-type="image" tabindex="6"><img src="https://shixixiyue.gitee.io//post-images/1684484131532.gif" alt="表单验证位置" loading="lazy"></figure>
<h4 id="grid列表鼠标阔选">Grid列表鼠标阔选</h4>
<pre><code>//Pro
F.ready(function () {
    F(gridClientID).quickSelect = true;//true开启 false关闭
});
</code></pre>
<pre><code>//MVC/Core
F.ready(function () {
    F.ui.Grid.quickSelect = false;//true开启 false关闭
});
</code></pre>
<figure data-type="image" tabindex="7"><img src="https://shixixiyue.gitee.io//post-images/1684484142770.gif" alt="Grid列表鼠标阔选" loading="lazy"></figure>
<h4 id="textbox标签模式">TextBox标签模式</h4>
<pre><code>//Pro
F.ready(function () {
    F(textClientID).multiTag();//开启
    F(textClientID).addTag(`文件3`);//新增标签
    F(textClientID).removeTag(`文件3`);//移除标签
    F(textClientID).setValue(`1,2,3`);//逗号分隔标签
});
</code></pre>
<pre><code>//MVC/Core
F.ready(function () {
    F.ui.TextBox1.multiTag();//开启
    F.ui.TextBox1.addTag(`文件3`);//新增标签
    F.ui.TextBox1.removeTag(`文件3`);//移除标签
    F.ui.TextBox1.setValue(`1,2,3`);//逗号分隔标签
});
</code></pre>
<figure data-type="image" tabindex="8"><img src="https://shixixiyue.gitee.io//post-images/1684484158630.gif" alt="TextBox标签模式" loading="lazy"></figure>
<h4 id="checkboxlist-radiobuttonlist-分组模式">CheckBoxList RadioButtonList 分组模式</h4>
<pre><code>//Pro
F.ready(function () {
    F(RadioButtonList3).checkgroup();//开启
}); 
</code></pre>
<pre><code>//MVC/Core
F.ready(function () {
    F.ui.RadioButtonList3.checkgroup();//开启
}); 
</code></pre>
<figure data-type="image" tabindex="9"><img src="https://shixixiyue.gitee.io//post-images/1698742466118.gif" alt="" loading="lazy"></figure>
<h4 id="项目">项目</h4>
<figure data-type="image" tabindex="10"><img src="https://shixixiyue.gitee.io//post-images/1698742491979.gif" alt="" loading="lazy"></figure>
<h3 id="获取">获取</h3>
<figure data-type="image" tabindex="11"><img src="https://shixixiyue.gitee.io//post-images/1684484169059.jpg" alt="" loading="lazy"></figure>

            </div>
            
              <div class="tag-container">
                
                  <a href="https://shixixiyue.gitee.io/tag/njETBpqXu/" class="tag">
                    FineUICore
                  </a>
                
              </div>
            
            
              <div class="next-post">
                <div class="next">下一篇</div>
                <a href="https://shixixiyue.gitee.io/finedrawio/">
                  <h3 class="post-title">
                    FineDrawio
                  </h3>
                </a>
              </div>
            

            

          </div>

        </div>
      </div>
    </div>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script type="application/javascript">

AOS.init();

var app = new Vue({
  el: '#app',
  data: {
    menuVisible: false,
  },
})

</script>


  <script src="//jsd.onmicrosoft.cn/gh/highlightjs/cdn-release@11.5.1/build/highlight.min.js"></script>
  <script>
    hljs.initHighlightingOnLoad();
    //hljs.registerLanguage('mermaid', window.hljsDefineMermaid);
  </script>
  <script src="//jsd.onmicrosoft.cn/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>
  <script>
    hljs.initLineNumbersOnLoad({
      singleLine: true
    });
  </script>
 <script src="https://jsd.onmicrosoft.cn/npm/mermaid/dist/mermaid.min.js"></script>
   <script>
    mermaid.initialize({
      startOnLoad: true,
      securityLevel: 'loose',
    });
  </script>





  </body>
</html>
